<template>
  <input
    :type="type"
    class="hminput"
    @input="handlerinput"
    :[pn]="{success:flag,error:!flag}"
    @change="handleBlur"
  />
</template>

<script>
export default {
  // props: ["rules", "msg"],

  props: {
    rules: {
      type: RegExp
    },
    msg: {
      type: String,
      default: "输入错误"
    },
    type: {
      type: String
    }
  },
  data() {
    return {
      // statu: true,
      flag: "",
      pn: "aa"
    };
  },
  methods: {
    handlerinput(e) {
      this.pn = "class";
      let value = e.target.value;
      // 正则的匹配方法

      if (this.rules) {
        // 判断是否传递了规则
        // 进行用户数据的校验
        if (this.rules.test(value)) {
          // 合法
          // console.log("ok");
          this.flag = true;
        } else {
          // 不合法
          // console.log(this.msg);
          this.flag = false;
        }
      }

      this.$emit("input", value);
    },

    // 当失去焦点时，再次验证用户的输入是否合法，如果不合法则给出明确的提示
    handleBlur(e) {
      let value = e.target.value;
      // if (this.rules && !this.rules.test(value)) {
      //   console.log(this.msg || "输入不正确");
      // }

      if (this.rules) {
        // 判断是否传递了规则
        // 进行用户数据的校验
        if (!this.rules.test(value)) {
          // 合法
          // console.log(this.msg);
          this.$toast.fail(this.msg);
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.hminput {
  width: 314 / 360vw * 100;
  height: 50px;
  outline: none;
  border: none;
  border-bottom: 2px solid #ccc;
  font-size: 16px;
  color: #ccc;
  line-height: 50px;
}
.success {
  border-bottom-color: green;
}
.error {
  border-bottom-color: red;
}
</style>